<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js"></script>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
<div id="app">
    <txx></txx>
    <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
        <h2>添加车辆</h2>
        <el-form label-width="80px" label-position="left">
            <el-form-item label-width="0px" style="margin-bottom: 0px">
                <div class="flex" style="align-items: stretch">
                    <el-form label-width="80px" label-position="left" style="width:340px">
                        <el-form-item label="型号: ">
                            <el-input placeholder="型号" v-model="model"></el-input>
                        </el-form-item>
                        <el-form-item label="品牌: ">
                            <el-select style="width: 100%" placeholder="请选择品牌" v-model="brand">
                                <el-option label="宝马" value="宝马"></el-option>
                                <el-option label="奔驰" value="奔驰"></el-option>
                                <el-option label="丰田" value="丰田"></el-option>
                                <el-option label="比亚迪" value="比亚迪"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="租价: ">
                            <el-input placeholder="租价" type="number" v-model="price"></el-input>
                        </el-form-item>
                        <el-form-item label="状态: " >
                            <el-radio-group v-model="state">
                                <el-radio label="在库">在库</el-radio>
                                <el-radio label="出库">出库</el-radio>
                                <el-radio label="维修">维修</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                    <el-popover width="400" trigger="click" placement="top-end">
                        <el-image slot="reference" fit="cover" style="margin-right: 10px; width: 200px; height: 226px">
                            <span slot="error" class="fbox border1">提交封面图</span>
                        </el-image>
                        <el-input placeholder="粘贴封面图" v-model="image">
                            <el-button slot="append">上传封面图</el-button>
                        </el-input>
                    </el-popover>
                </div>
            </el-form-item>
            <el-form-item label="轮播图: ">
                <div id="carousel" class="flex" style="justify-content: flex-start">
                    <el-popover width="400" trigger="click" placement="top-start">
                        <el-image slot="reference" fit="cover">
                            <span slot="error" class="fbox border1">提交图片</span>
                        </el-image>
                        <el-input placeholder="粘贴图片" v-model="img">
                            <el-button slot="append"  @click="addImage" >上传图片</el-button>
                        </el-input>
                    </el-popover>
                    <el-popover width="400" trigger="click" placement="top-start" v-for="image in images">
                        <el-image slot="reference" fit="cover"
                                  :src="image.path">
                            <span slot="error" class="fbox border1">提交图片</span>
                        </el-image>
                        <el-input placeholder="粘贴图片">
                            <el-button slot="append">上传图片</el-button>
                        </el-input>
                    </el-popover>

                </div>
            </el-form-item>
            <el-form-item label="介绍: ">
                <el-input placeholder="介绍" v-model="intro"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 10px">
                <el-button type="primary" @click="uploadCar">添加</el-button>
            </el-form-item>
        </el-form>
    </main>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            model: "",
            brand: "",
            price: "",
            state: "",
            image: "",
            intro: "",
            images: [],
            img:""
        },
        created(){

        },
        methods:{
            addImage(){
                this.images.push({id: null, cid: null, path: this.img});
            },

            addImages(id){
                this.images.forEach(image =>{
                    image.cid = id;
                    console.log(image)
                })
                axios.post("txxImage/addImages", this.images)
            },

            uploadCar(){
                var time = new Date();
                const carData = {
                    model: this.model,
                    brand: this.brand,
                    price: this.price,
                    state: this.state,
                    image: this.image,
                    intro: this.intro,
                    intime: time.toISOString(), // 将日期转换为 ISO 格式的字符串，确保后端可以正确解析
                    stars: 0,
                    id: null
                };

                axios.post("txxCar/addCar", carData)
                    .then(res => {
                        this.addImages(res.data.data);
                        this.$message(res.data.msg);
                    })
                    .catch(error => {
                        console.error('Error uploading car:', error);
                    });
            },

        }
    })
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>
